<template>
  <div>
    <n-form inline>
      <n-form-item>
        <div class="cf" style="width: 100%;">
        <div class="fll">
          <n-input-group>
            <n-input v-model:value="searchParam.key" placeholder="请输入关键字搜索"  :style="{ width: '100%' }" />
            <n-button type="primary" @click="search">
              <n-icon size="18" class="mx-2 action-icon">
                <SearchOutlined style="color: #fff;" />
              </n-icon>
            </n-button>
          </n-input-group>
        </div>
        <div class="flr">
          <n-button class="s-button mgr20 u-btn" @click="handleAdd">新增变量</n-button>
        </div>
      </div>
      </n-form-item>
    </n-form>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, reactive, onMounted, computed } from 'vue';
  import { SearchOutlined } from '@vicons/antd';
  const searchParam = reactive({
    key: null,
  });
  const emits = defineEmits(['send']);

  const props = defineProps({
    pageParam: {
      type: Object,
      required: true,
    },
  });

  // 搜索发送消息
  function search() {
    console.log(searchParam);
    emits('send', 'refreshTable', searchParam);
  }

  // 新增变量
  function handleAdd() {
    emits('send', 'addTable', null);
  }

  // 页面初始化
  function init(params) {
    // 加载页面初始化数据
  }
  // 暴漏出init方法
  defineExpose({
    init,
  });
</script>
<style lang="less" scoped>

.flr {
  float: right;
}

.fll {
  float: left;
}

.cf:after {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;
}

.cf {
  zoom: 1;
}
::v-deep .n-form.n-form--inline .n-form-item{
  width: 100% !important;
}
.s-button {
  background: linear-gradient(
    180deg,
    rgba(#2282e3, 0.7) 0%,
    rgba(103, 107, 109, 0.3) 45%,
    rgba(103, 107, 109, 0.3) 55%,
    rgba(#2282e3, 0.7) 100%
  );
  .n-button__border {
    display: none;
  }
}
</style>